<!-- 合作商 -->
<template>
  <div class="HomeTrademark">
    <div class="imgContainer">
      <img
        src="https://hll-prod.oss-cn-beijing.aliyuncs.com/hll_newPc/HomeTrademark/tradmakTitle.png"
        class="trademarkTitle"
      />
      <ul class="imgBox">
        <li v-for="(item, index) of imgList" :key="index" class="imgitem">
          <img
            :src="item.img"
            class="iconTrademakr"
            :style="{ height: item.height + 'px', width: item.width + 'px' }"
          />
        </li>
      </ul>
    </div>
  </div>
</template>

<script >
export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    // 这里存放数据
    return {
      imgList: [
        {
          img: "https://file.honglonglong.com.cn/hll_newPc/HomeTrademark/1.svg",
          width: 74,
          height: 80,
        },
        {
          img: "https://file.honglonglong.com.cn/hll_newPc/HomeTrademark/2.svg",
          width: 87,
          height: 86,
        },
        {
          img: "https://file.honglonglong.com.cn/hll_newPc/HomeTrademark/3.svg",
          width: 86,
          height: 70,
        },
        {
          img: "https://file.honglonglong.com.cn/hll_newPc/HomeTrademark/4.svg",
          width: 59,
          height: 90,
        },
        {
          img: "https://file.honglonglong.com.cn/hll_newPc/HomeTrademark/5.svg",
          width: 59,
          height: 86,
        },
        {
          img: "https://file.honglonglong.com.cn/hll_newPc/HomeTrademark/6.svg",
          width: 70,
          height: 72,
        },
        {
          img: "https://file.honglonglong.com.cn/hll_newPc/HomeTrademark/7.svg",
          width: 64,
          height: 83,
        },
        {
          img: "https://file.honglonglong.com.cn/hll_newPc/HomeTrademark/8.svg",
          width: 71,
          height: 83,
        },
        {
          img: "https://file.honglonglong.com.cn/hll_newPc/HomeTrademark/9.svg",
          width: 88,
          height: 83,
        },
        {
          img: "https://file.honglonglong.com.cn/hll_newPc/HomeTrademark/10.svg",
          width: 74,
          height: 87,
        },
        {
          img: "https://file.honglonglong.com.cn/hll_newPc/HomeTrademark/11.svg",
          width: 88,
          height: 83,
        },
        {
          img: "https://file.honglonglong.com.cn/hll_newPc/HomeTrademark/12.svg",
          width: 64,
          height: 83,
        },
        {
          img: "https://file.honglonglong.com.cn/hll_newPc/HomeTrademark/13.svg",
          width: 74,
          height: 87,
        },
        {
          img: "https://file.honglonglong.com.cn/hll_newPc/HomeTrademark/14.svg",
          width: 59,
          height: 86,
        },
        {
          img: "https://file.honglonglong.com.cn/hll_newPc/HomeTrademark/15.svg",
          width: 59,
          height: 83,
        },
        {
          img: "https://file.honglonglong.com.cn/hll_newPc/HomeTrademark/16.svg",
          width: 64,
          height: 88,
        },
        {
          img: "https://file.honglonglong.com.cn/hll_newPc/HomeTrademark/17.svg",
          width: 66,
          height: 93,
        },
        {
          img: "https://file.honglonglong.com.cn/hll_newPc/HomeTrademark/18.svg",
          width: 59,
          height: 89,
        },
        {
          img: "https://file.honglonglong.com.cn/hll_newPc/HomeTrademark/19.svg",
          width: 72,
          height: 84,
        },
        {
          img: "https://file.honglonglong.com.cn/hll_newPc/HomeTrademark/20.svg",
          width: 63,
          height: 88,
        },
      ],
    };
  },
  // 过滤器
  filters: {},
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  ctivated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang='scss' scoped>
.HomeTrademark {
  width: 100%;
  height: 100vh;
  background: url("https://hll-prod.oss-cn-beijing.aliyuncs.com/hll_newPc/HomeTrademark/trademakBg.png")
    no-repeat;
  background-size: 100%, 100%;
}
.imgContainer {
  width: 1180px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.trademarkTitle {
  width: 233px;
  height: 68px;
}
.imgBox {
  display: flex;
  align-items: center;
  // justify-content: space-around;
  flex-wrap: wrap;
  width: 1500px;
  margin-left: -100px;
  // 淡入淡出
  img:hover {
    transition: 0.4s all ease-in;
    cursor: pointer;
    transform: scale(1.4); /*以y轴为中心旋转*/
  }
}
.imgitem {
  width: 280px;
  margin-top: 52px;
  text-align: center;
}
// 淡入淡出
.iconTrademakr {
  object-fit: contain;
  cursor: pointer;
  transition: all 0.5s;
}
</style>
